<template>
    <div class="title-view">
            <p class="title">{{title}}</p>
            <p class="title-border"></p>
    </div>
</template>

<script>
export default {
    mixins: [],
    components: {},
    props: ["title"],
    data () {
        return {
        }
    },
    computed: {},
    watch: {},
    created () {},
    mounted() {},
    methods: {},
}
</script>
<style  scoped>
.title-view .title{
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 2px #fff;
}
.title-border{
    height: 1px;
    width: 0%;
    background-color: #09DEFF ;
    animation: title-border 5s linear infinite;
}
.title-border2{
    height: 1px;
    width: 100%;
    background-color: #09DEFF ;
    animation: growShrink 5s infinite alternate;
}
@keyframes growShrink {
    0% {
      transform: scaleX(1); /* 初始宽度 */
    }
    50% {
      transform: scaleX(0.5); /* 宽度放大到1.5倍 */
    }
    100% {
      transform: scaleX(1); /* 宽度恢复到初始值 */
    }
  }
@keyframes title-border {
    100% {
        width: 0%;
    }
    99% {
        width: 80%;
    }
    90% {
        width: 75%;
    }
    80% {
        width: 70%;
    }
    70% {
        width: 65%;
    }
    60% {
        width: 60%;
    }
    50% {
        width: 50%;
    }
    40% {
        width: 40%;
    }
    30% {
        width: 30%;
    }
    20% {
        width: 20%;
    }
    10% {
        width: 10%;
    }
    0% {
        width: 0%;
    }
}

</style>
